<template>
  <!--人脸报表-案场客流查询 -->
  <el-row style="height:100%">
    <page report="true">
      <div class="page-content report-con">
         <reportfaceheader
          :option="option"
          :Caseradio='true'
          :tags='global.tags'
          :showType="'3'"
        ></reportfaceheader>
        <div class="hei13"></div>
        <div class="card loadingClass"
            v-loading="xxloading"
            element-loading-text="请点击查询报表获取相关数据"
            element-loading-spinner="el-icon-caret-top"
            element-loading-background="rgba(245, 248, 254, 1)">
          <el-tabs v-model="timeAllActiveName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部"  name="all">
              <reportSaleCharts_timeAll :con_w="con_w" ref="timeAll">
              </reportSaleCharts_timeAll>
            </el-tab-pane>
            <el-tab-pane label="男女比例"  name="sex">
              <reportSaleCharts_timeAllSex :con_w="con_w" ref="timeAllSex">
              </reportSaleCharts_timeAllSex>
            </el-tab-pane>
            <el-tab-pane label="年龄段"  name="ages">
              <reportSaleCharts_timeAllAge :ageList="ageList" :con_w="con_w" ref="timeAllAge">
              </reportSaleCharts_timeAllAge>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="hei13"></div>
        <div class="card" v-show="indicator_keys.length">
          <el-tabs v-model="timeSubActiveName" type="card" @tab-click="handleClick">
            <el-tab-pane v-for="item in indicator_keys" :label="item.name" :key="item.key" :name="item.key">
              <reportSaleCharts_timeSub :con_w="con_w" :ref="item.key" :ageList="ageList">
              </reportSaleCharts_timeSub>
            </el-tab-pane>
          </el-tabs>
        </div>
        <template v-for="(item,index) in indicator_keys">
          <reportSaleCharts_distrSub :key="item.key" :indicator_keys="indicator_keys"
                                     :ageList="ageList" :con_w="con_w" :ref="item.key + 'distrSub'"
                                     :class="[index%2 == 0 ? 'mgr13' : '']">
          </reportSaleCharts_distrSub>
        </template>
        <reportSaleProportion v-show="isShowProportion"
                              :indicator_keys="indicator_keys"
                              :con_w="con_w"
                              ref="proportion"></reportSaleProportion>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  .loadingClass{
    .el-loading-mask{
      .el-loading-spinner{
        top: 80px;
        i{
          display: none;
        }
        .el-loading-text{
          font-size: 18px;
          font-weight: bold;
          color:#b4b6bd;
        }
      }
      
    }
  }
  .page-content {
    &.report-con {
      padding: 0 0;
    }

    padding: 15px;

    .fr {
      float: right;
    }

    .el-table {
      margin-bottom: 10px;
    }

    .paging {
      margin: 15px;
      height: 28px;
    }

    .hei13 {
      height: 15px;
      width: 100%;
    }
  }
  .card{
    width: 100%;
    background: #fff;
    padding: 15px 10px;
    overflow: hidden;
  }
  .mgr13{
    margin-right: 13px;
  }
</style>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import reportfaceheader from "@/components/analyzeReport/reportpublic/reportFaceHead";
  import reportSaleCharts_timeAll from "@/components/analyzeReport/reportpublic/reportFaceSaleChartsTimeAll";
  import reportSaleCharts_timeAllSex from "@/components/analyzeReport/reportpublic/reportFaceSaleChartsTimeAllSex";
  import reportSaleCharts_timeAllAge from "@/components/analyzeReport/reportpublic/reportFaceSaleChartsTimeAllAge";
  import reportSaleCharts_timeSub from "@/components/analyzeReport/reportpublic/reportFaceSaleChartsTimeSub";
  import reportSaleCharts_distrSub from "@/components/analyzeReport/reportpublic/reportFaceSaleChartsDistrSub";
  import reportSaleProportion from "@/components/analyzeReport/reportpublic/reportFaceSaleProportion";
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  let unit = reportGlobal.unit;
  let kpiName = reportGlobal.name;
  export default {
    data: function () {
      //表格数据
      return {
        ageList:[],//年龄组
        globalIndicator_keys:[],//本地指标数组
        indicator_keys:[],//指标交集数组
        timeAllActiveName:'all',
        timeSubActiveName:'',//选项卡选中值
        con_w:'',//组件宽度
        option: {
          shortcuts: 'dayShortcuts',
          isAreaShow: true,                 //是否显示区域，如显示需传title 默认不显示
          caseTitle: "",
          areaTitle: "",
        },
        DataV: {
          area_id:[],//案场id
          time:['',''], //日期
          duibi_time:['',''],//对比日期
          start_hm:[],   //开始时段
          end_hm:[],    //结束时段
          timeSizeCkeck:'',//时间粒度
        },      //head条件接收
        xData: [],
        yData: [],
        yName: [],
        y_danwei:'',
        titleText: "",
        commonData: null,
        echartKpis: [],//echart指标
        proportionData:{

        },//占比数据
        isShowProportion:false,
        global: {},//公共参数
        code: this.$route.query.code,        //通过菜单栏点击传过来的code判断使用的公共参数
        xxloading:true,   //提示信息遮罩层
      };
    },
    inject: ["reload"],
    components: {
      page,
      reportfaceheader,
      reportSaleCharts_timeAll,
      reportSaleCharts_timeAllSex,
      reportSaleCharts_timeAllAge,
      reportSaleCharts_timeSub,
      reportSaleCharts_distrSub,
      reportSaleProportion,
    },
    created() {
      for (let i in reportGlobal.queryList) {
        if (this.code == reportGlobal.queryList[i].code) {
          this.global = reportGlobal.queryList[i]
        }
      }
      this.option.caseTitle = this.global.caseTitle;
      this.option.areaTitle = this.global.areaTitle;
      this.globalIndicator_keys = this.global.indicator_keys
      this.getAgeList()
    },
    mounted() {
      //条件改变
      this.$Bus.$on("UpCondition", (data) => {
        if (this.xxloading) {
          this.xxloading = false;
        }
        this.DataV = data;
        this.$Bus.$emit('Loading', true);
        this.getKpi()
        this.$refs.timeAll.defaultEchart()
        this.$refs.timeAllSex.defaultEchart()
        this.$refs.timeAllAge.defaultEchart()
        this.indicator_keys.forEach(x => {
          this.$refs[x.key][0].defaultEchart()
        })
      });
      //初始化触发事件
      setTimeout(() => {
        this.loadEchartResize();
      }, 200)
      //窗口变化触发事件
      setTimeout(() => {
        window.onresize = () => {
          this.loadEchartResize();
        };
      }, 200);
     //切换企业时清空数据
     this.$Bus.$on('Remove', () => {
        this.removedata();
     });

    },
    beforeDestroy() {
      this.$Bus.$off('UpCondition');
      this.$Bus.$off('Remove');
    },
    watch: {
      $route(){
        this.reload()
      },
    },
    methods: {
      //获取年龄组配置
      getAgeList(){
        let url = '/sys/face_report/age_group'
        this.$api.post(url)
        .then(data=>{
          // console.log(data);
          this.ageList = data.data;
        })
        .catch(err=>{
           console.log(err);
          this.$message.error('获取年龄组失败')
          this.$Bus.$emit('Loading', false)
        })
      },
      //获取权限下的指标
      getKpi(){
        let url = '/sys/report_assist_new/get_indicator_list'
        let params = {
          org_id_list : this.DataV.area,
          org_type : 3,
        }
        this.$api.post(url,params)
        .then(data=>{
          // console.log(data);
          this.indicator_keys = data.data.filter(x => {
            return this.globalIndicator_keys.includes(x.key)
          })
          this.timeSubActiveName = this.indicator_keys[0].key
          this.$nextTick(()=>{
            //判断是否显示客流占比模块
            this.isShowProportion = this.indicator_keys.map(x=>x.key).includes('face_total_enters') && this.indicator_keys.length > 1 ? true : false
            let fn = async ()=> {
              for(let i in this.indicator_keys){
                let x = this.indicator_keys[i]
                this.upDataTimeDivisionSum(x.key,x.name)
                await this.upDataDistributionSum(x.key,x.name)
              }
            }
            fn().then(()=>{
              if(this.isShowProportion){
                this.$refs.proportion.UpData(this.proportionData)
              }
            })
          })
        })
        .catch(err=>{
           console.log(err);
          this.$message.error('获取指标权限失败')
          this.$Bus.$emit('Loading', false)
        })
      },
      //分时报表接口
      upDataTimeDivisionSum(key,name) {
        let url = '/sys/face_report/time_division_sum'
        let params = {
          org_id_list : this.DataV.area,
          org_type : 3,
        }
        url += '?group_type=area&tags=' + this.global.tags + '&indicator_key='+ key + '&interval=' + this.DataV.timeSizeCkeck + '&face_filter_type='+ this.DataV.face_filter_type +
          '&start_day=' + this.DataV.start_day + '&end_day=' + this.DataV.end_day + '&start_hm=' + this.DataV.start_hm + '&end_hm=' + this.DataV.end_hm
        this.$api.post(url,params)
        .then(data=>{
          // console.log(data,'分时报表');
          if(data && data.data){
            let sum_list = data.data.sum_list
            this.getDataToTimeAll(sum_list,key,name)
            this.getDataToTimeAllSex(sum_list,key,name)
            this.getDataToTimeAllAge(sum_list,key,name)
            this.getDataToTimeSub(sum_list,key,name)
          }
        })
        .catch(err=>{
           console.log(err);
          // this.$message.error('获取指标权限失败')
          this.$Bus.$emit('Loading', false)
        })
      },
      //分布报表
      upDataDistributionSum(key,name) {
        let p = new Promise((res,rej)=>{
          let url = '/sys/face_report/distribution_sum'
          let params = {
            org_id_list : this.DataV.area,
            org_type : 3,
          }
          url += '?group_type=area&tags=' + this.global.tags + '&indicator_key='+ key + '&face_filter_type='+ this.DataV.face_filter_type +
            '&start_day=' + this.DataV.start_day + '&end_day=' + this.DataV.end_day +
            '&start_hm=' + this.DataV.start_hm + '&end_hm=' + this.DataV.end_hm
          this.$api.post(url,params)
          .then(data=>{
            console.log(data,'分部报表');
            if(data && data.data){
              let sum_list = data.data.sum_list
              this.proportionData[key] = sum_list ? sum_list[0].all_enters : []
              this.getDataToDistrionSum(sum_list,key,name)
              res()
            }
          })
          .catch(err=>{
            rej(err)
             console.log(err);
            // this.$message.error('获取指标权限失败')
            this.$Bus.$emit('Loading', false)
          })
        })
        return p

      },
      loadEchartResize(){
        this.con_w = $(".page-content").width()
      },
      //点击选项卡
      handleClick(){
        // console.log('handleClick');
      },
      //制作分时总报表
      getDataToTimeAll(sum_list,key,name){
        if(sum_list){
          let sumData = {
            x_data:[],
            y_data:[],
            y_name:name,
            key:key
          }
          for(let i in sum_list){
            sumData.x_data.push(sum_list[i].time_tag)
            sumData.y_data.push(sum_list[i].all_enters)
          }
          this.$refs.timeAll.UpData(sumData)
        }else{
          this.$refs.timeAll.UpData(false)
        }
        this.$Bus.$emit('Loading', false);
      },
      //制作分时男女比例报表
      getDataToTimeAllSex(sum_list,key,name){
        // console.log(sum_list,'sum_list');
        if(sum_list){
          let sumData = {
            x_data:[],
            y_data_male:[],
            y_data_female:[],
            y_name:name,
            key:key
          }
          for(let i in sum_list){
            sumData.x_data.push(sum_list[i].time_tag)
            sumData.y_data_male.push(sum_list[i].male_enters)
            sumData.y_data_female.push(sum_list[i].female_enters)
          }
          this.$refs.timeAllSex.UpData(sumData)
        }else{
          this.$refs.timeAllSex.UpData(false)
        }
        this.$Bus.$emit('Loading', false)
      },
      //制作分时详细男女比例和年龄段报表
      getDataToTimeAllAge(sum_list,key,name){
        // console.log(sum_list,'sum_list');
        // console.log(this.ageList,'this.ageList');
        if(sum_list){
          let sumData = {
            x_data:[],
            y_data_male:[],
            y_data_female:[],
            y_name:name,
            key:key
          }
          for(let i in this.ageList){
            sumData[this.ageList[i].key] = []
          }
          for(let i in sum_list){
            sumData.x_data.push(sum_list[i].time_tag)
            sumData.y_data_male.push(sum_list[i].male_enters)
            sumData.y_data_female.push(sum_list[i].female_enters)
            for(let j in this.ageList){
              sumData[this.ageList[j].key].push(Number(sum_list[i].male_enters_list[j]) + Number(sum_list[i].female_enters_list[j]))
            }
          }
          // console.log(sumData,'sumData');
          this.$refs.timeAllAge.UpData(sumData)
        }else{
          this.$refs.timeAllAge.UpData(false)
        }
        this.$Bus.$emit('Loading', false)
      },
      //制作分时
      getDataToTimeSub(sum_list,key,name){
        if(sum_list){
          let sumData = {
            x_data:[],
            y_data:[],
            y_name:name,
            male_enters:[],//男性总人数
            female_enters:[],//女性总人数
            male_enters_list:[],//男性年龄层数组
            female_enters_list:[],//女性年龄层数组
            key:key
          }
          for(let i in sum_list){
            sumData.x_data.push(sum_list[i].time_tag)
            sumData.y_data.push(sum_list[i].all_enters)
            sumData.male_enters.push(sum_list[i].male_enters)
            sumData.female_enters.push(sum_list[i].female_enters)
            sumData.male_enters_list.push(sum_list[i].male_enters_list)
            sumData.female_enters_list.push(sum_list[i].female_enters_list)
          }
          this.$refs[key][0].UpData(sumData)
        }else{
          this.$refs[key][0].UpData(false)
        }
      },
      //制作分布总报表
      getDataToDistrionSum(sum_list,key,name){
        if(sum_list){
          let sumData = {
            y_name:name,
            key:key,
            male_enters:[],//男性总人数
            female_enters:[],//女性总人数
            male_enters_list:[],//男性年龄层数组
            female_enters_list:[],//女性年龄层数组
          }
          for(let i in sum_list){
            sumData.male_enters.push(sum_list[i].male_enters)
            sumData.female_enters.push(sum_list[i].female_enters)
            sumData.male_enters_list.push(sum_list[i].male_enters_list)
            sumData.female_enters_list.push(sum_list[i].female_enters_list)
          }
          this.$refs[key + 'distrSub'][0].UpData(sumData)
        }else{
          this.$refs[key + 'distrSub'][0].UpData(false)
        }
      },
      //清除数据
      removedata() {
        this.commonData = null;
        this.DataV = {};
      },


    }
  };
</script>
